
$left-width: 150px;
$proj-name-width: 100px;
$cell-width: 50px;
$row-height: 40px;

@import "src/sass/global/mixin";

$bdr: 1px solid #E3E8EE;
$dash-bdr: 1px dashed #E3E8EE;
$clr-gray: #E3E8EE;
#schedule {
	#main-body {
		height: calc(100% - 60px);
	}

	.total-table {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		.left-list {
			width: 290px;
			float: left;
			border-right: $bdr;

            .title {
	            font-size: 15px;
	            color: $gray;
	            height: 51px;
	            line-height: 50px;
	            background-color: #E3E8EE;
	            position: fixed;
	            width: 290px;
	            z-index: 5;
	            border-right: $bdr;
	            em {
	                float: left;
	                font-style: normal;
	                padding-left: 30px;
	            }
	            .total {
	                float: right;
	                padding-right: 30px;
	            }
	        }
            .proj {
                height: 40px;
                border-bottom: 1px solid #E3E8EE;
                // cursor: pointer;
                line-height: 40px;
                padding: 0 30px;
                font-size: 14px;

                .proj-set {
                    float: left;
                    font-size: 20px;
                    text-align: center;
                    line-height: 16px;
                    color: #999;
                    margin: 11px 8px 0 0;
                    display: inline;
                }
                .name {
                	width: 154px;
				    overflow: hidden;
				    height: 30px;
				    display: inline-block;
				    text-overflow: ellipsis;
				    white-space:nowrap; 
                }
                .city {
                    float: right;
                    margin: 0px 0px 0 0;
                }
            }
            .prolist {
            	margin-top: 49px;
            }

            .proj:hover, .proactive {
            	.proj-set {
            		color: #333;
            	}
            	.name, .city {
            		color: #333;
            	}
                background-color: #f8f8f8;
            }

            &.dummy {
                .total, .proj {
                    visibility: hidden;
                }
            }
		}
		.main-table {
			margin-left: 290px;
            position: relative;
            overflow-x: auto;
            white-space: nowrap;
            .a-row-pro:first-child {
                
            }
			.a-row {
				font-size: 0px;
				letter-spacing: 0px;
				word-spacing: 0px;
				position: relative;
				.header-cells .cell {
					border-top: $bdr;
					position: relative;

					.month {
						display: none;

						// 这是月份的样式，需要完善一下
						&.date1 {
							display: block;
							position: absolute;
							width: 28px;
							height: 28px;
							background: url("{{MIMAGE}}/week.png") no-repeat;
							font-size: 12px;
							color: #fff;
							top: -3px;
							left: -1px;
							text-align: left;
							text-indent: 5px;
						}
					}
				}

				/* border-top: 1px dotted gray; */

				.cell {
					display: inline-block;
					width: $cell-width; 
					height: 50px;; 
					border-right: $bdr;
					margin: 0px;
					z-index: 1;
					text-align: center;

					span {
						font-size: 10px;
						display: block;
						margin-top: 2px;
					}
					span.date {
						padding-top: 5px;
					}
				}

				.cell.today {
					background-color: $clr-gray; 
				}

				.bar {
					position: absolute;
					background-color: #4990E2;
					z-index: 2;
					border-radius: 7px;
					top: 13px;
					height: 14px;

					left: 50px;
					width: 102px;

					&.future {
						background-color: #fff;
						opacity: 0.5;

						&.span-today {
							border-top-left-radius: 0px;
							border-bottom-left-radius: 0px;
						}
					}
				}
			}

            .a-row.header-row {
            	position: fixed;
            	background-color: #fff;
            	left: 290px;
            	z-index: 3;
            	border-bottom: $bdr;
            }
            .rowbox {
            	margin-top: 49px;
            }


            
            .a-row-pro {
            	.cell {
            		height: 40px;
            	}
            	 
            }

            .a-row-pro:hover, .active {
            	.cell {
            		border-top: $dash-bdr;
                	border-bottom: $dash-bdr;
            	}
            	.bar {
                	top: 13px;
                	z-index: 2;
                }
            }
            
		}
		.a-row-pro:nth-child(1) .cell { 
			border-top: $bdr;
		}
		.a-row-pro:last-child .cell { 
			border-bottom: $bdr;
		}
	}
}
